<template>
  <view class="comBox">
    <sickTitleCom></sickTitleCom>
    <view class="body">
      <view class="inputBox">
        <span class="name lineHeight86">您的腰围</span>
        <input
          v-model="mainData.waistline"
          type="digit"
          class="uni-input lineHeight86"
          name="waistline"
          placeholder-class="phcolor"
        />
        <view v-for="item in array" :key="item.id" class="unit">
          <span v-show="item.id === waistlineUnit">{{ item.name }}</span>
        </view>
        <view class="clear"></view>
      </view>
      <view class="inputBox unitBox">
        <view class="name lineHeight86">选择腰围单位</view>
        <view class="unit">
          <span
            v-for="(item, index) in array"
            :key="index"
            :class="['unitList', waistlineUnit === item.id ? 'cur' : null]"
            @click="choseUnit(item)"
            >{{ item.name }}
            <span v-if="waistlineUnit === item.id" class="curImg"><img :src="curIcon" /></span>
          </span>
          <!-- <span class="unitList">mg/dl</span> -->
        </view>
        <view class="clear"></view>
      </view>
      <!-- 下一题上一题按钮 -->
      <fixed-bottom-button>
        <nextProBtnCom @nextBtn="nextBtn" @proBtn="proBtn"></nextProBtnCom>
      </fixed-bottom-button>
    </view>
  </view>
</template>

<script>
import { checkInt, checkBetween, checkBetweenDecimalOne } from '@/common/assessKeyCheck';
import nextProBtnCom from '@/components/nextProButton';
import sickTitleCom from './sickTitleCom';
import { ajaxSend } from './ajaxHealth.js';
import curIcon from '@/static/icon/cur.png';

export default {
  components: {
    // 上一题下一题组件
    nextProBtnCom,
    sickTitleCom
  },
  data() {
    return {
      mainData: {
        waistline: ''
      },
      array: [
        { id: 1, name: '厘米' },
        { id: 2, name: '尺' }
      ],
      waistlineUnit: 1,
      curIcon: curIcon
    };
  },
  computed: {
    active() {
      return this.$store.getters.active;
    },
    assessForm() {
      return this.$store.getters.assessForm;
    }
  },
  mounted() {},
  methods: {
    async nextBtn() {
      // 先校验数据
      let isPassAuth = true;
      // ① 必填校验
      Object.keys(this.mainData).forEach((key) => {
        if (!this.mainData[key]) {
          uni.showToast({ title: `请输入所有题目`, icon: 'none' });
          isPassAuth = false;
          return;
        }
      });
      if (!isPassAuth) {
        return false;
      }
      // ②录入值格式校验
      // 校验字段是否符合范围或者类型规范等
      // 正整数校验
      if (this.waistlineUnit === 1 && checkInt(this.mainData.waistline)) {
        uni.showToast({ title: `腰围请输入正整数`, icon: 'none' });
        return false;
      }
      if (this.waistlineUnit === 1 && checkBetween(this.mainData.waistline, '腰围', 30, 200)) {
        uni.showToast({
          title: checkBetween(this.mainData.waistline, '腰围', 30, 200),
          icon: 'none'
        });
        return false;
      }
      if (this.waistlineUnit === 2 && checkBetweenDecimalOne(this.mainData.waistline, '腰围', 1, 6)) {
        uni.showToast({
          title: checkBetweenDecimalOne(this.mainData.waistline, '腰围', 1, 6),
          icon: 'none'
        });
        return false;
      }
      // 提交vuex assessForm值
      let submitData = this.assessForm;
      Object.keys(this.mainData).forEach((key) => {
        submitData[key] = this.mainData[key];
      });

      if (this.waistlineUnit === 2) {
        submitData.waistline = Math.round(submitData.waistline * 33.33);
      }
      // 获取健康指标指导意见 判断是出健康提示还是直接下一步 start
      const healthData = await ajaxSend({ waistline: submitData.waistline });
      let curActive = this.active + 1;
      if (healthData && healthData.length > 0) {
        // 如果有异常，则提示
        this.$store.commit('assessQuestion/SET_AJAXRESMESSAGE', healthData); // 存提示信息到vux，数组格式
        this.$store.commit('assessQuestion/SET_AJAXRES', true); // 开启提示
      } else {
        this.$store.commit('assessQuestion/SET_ACTIVE', curActive);
        this.$store.commit('assessQuestion/SET_AJAXRES', false);
      }
      this.$store.commit('assessQuestion/SET_ASSESSFORM', submitData);
      // 获取健康指标指导意见 判断是出健康提示还是直接下一步 end
    },
    proBtn() {
      let curActive = this.active - 1;
      this.$store.commit('assessQuestion/SET_ACTIVE', curActive);
    },
    choseUnit(val) {
      val.id === 1 ? (this.waistlineUnit = 1) : (this.waistlineUnit = 2);
    }
  }
};
</script>
